<template>
	<view :data-theme="theme" class="content">
		<!-- <u-alert title="查看审核信息" v-if="showTip == true && showTip2 == false" @click="operateInform"
			type="warning"></u-alert>
		<u-alert title="返回" @click="goBack" v-if="showTip == false && showTip2 == true" type="warning"></u-alert> -->
		<uni-notice-bar text="查看审核信息" v-if="showTip == true && showTip2 == false" @click="operateInform"
			type="warning" />
		<uni-notice-bar text="返回" @click="goBack" v-if="showTip == false && showTip2 == true" type="warning" />
		<!-- 审核通过页面 -->
		<view v-if="showTip2 == false">
			<scroll-view :scroll-y="true" :style="{ 'padding-bottom':'20rpx' }" style="height: 100%; overflow: hidden;"
				@scrolltolower="scrolltolowerFn">
				<view class="card" v-for="(item,index1) in tableData" :key="item.id">
					<view class="header">
						{{item.name}}
					</view>
					<view class="header-text">
						<view style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;"
							v-if="checkboxValue[index1]" @click="getId(item,index1)">
							<view>
								售卖区域
							</view>
							<view>
								{{checkboxValue[index1].toString()}}
							</view>
							<u-icon name="arrow-right" color="#666" size="16"></u-icon>
						</view>
						<view style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;" v-else
							@click="getId(item,index1)">
							<view>
								售卖区域
							</view>
							<view>
								请选择
							</view>
							<u-icon name="arrow-right" color="#666" size="16"></u-icon>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 选择售卖区域 -->
			<view>
				<!-- <u-popup :show="show" @close="close"> -->
				<tui-drawer mode="bottom" :visible="show" @close="close">
					<view class="u-demo-block ensure">
						<!-- <text class="u-demo-block__title">请选择售卖区域</text> -->
						<view class="title_guan">
							<text @click="close" class="iconfont icon-guanbi5"></text>
							请选择售卖区域
							<!-- <text @click="operateCityComuleDate" class="iconfontRight">确认</text> -->
						</view>
						<view class="u-page__checkbox-item">
							<checkbox-group class="checke_list" @change="checkboxChange">
								<label class="uni-list-cell uni-list-cell-pd checke_item"
									v-for="(ele, index) in checkboxList" :key="index">
									<view class="item_top"
										style="margin-bottom: 32rpx;border-bottom: 1px solid #eee;justify-content: space-between;display: flex;padding-bottom: 20rpx;">
										<view class="item_img">
											{{ele.name}}
										</view>
										<checkbox :value="JSON.stringify(ele.name)" :color="bgColor" :iconColor="bgColor"
											class="round-checkbox" :disabled="true" />
									</view>
								</label>
							</checkbox-group>
							<view style="height: 50px;"></view>
						</view>
					</view>
				</tui-drawer>
				<!-- </u-popup> -->
			</view>

			<!-- 新增城市 -->
			<view>
				<view class="card" v-for="(item,index2) in this.operateData" :key="item.id">
					<view class="header-content" style="display: flex;justify-content: space-between;">
						<view class="header" style="display: inline-block;">
							{{item.name}}
						</view>
						<view class="header-right" style="display: inline-block;float: right;">
							<button @click="delateDate(index2)">删除</button>
						</view>
					</view>

					<view class="header-text">
						<view style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;"
							v-if="addCheckboxValue[index2]" @click="getId2(item,index2)">
							<view>
								售卖区域
							</view>
							<view>
								{{addCheckboxValue[index2].toString()}}
							</view>
							<u-icon name="arrow-right" color="#666" size="16"></u-icon>
						</view>
						<view style="display: flex;justify-content: space-between;font-size: 16px;margin: 20rpx;" v-else
							@click="getId2(item,index2)">
							<view>
								售卖区域
							</view>
							<view>
								请选择
							</view>
							<u-icon name="arrow-right" color="#666" size="16"></u-icon>
						</view>
					</view>

				</view>
			</view>

			<!-- 选择售卖区域 -->
			<view>
				<tui-drawer mode="bottom" :visible="show2" :addCheckboxList.sync="addCheckboxList" @close="close">
					<view class="u-demo-block ensure">
						<!-- <text class="u-demo-block__title">请选择售卖区域</text> -->
						<view class="title">
							<text @click="close" class="iconfont icon-guanbi5"></text>
							请选择售卖区域
							<text @click="operateCityComuleDate" class="iconfontRight">确认</text>
						</view>
						<view v-if="addCheckboxList.length != 0" class="u-page__checkbox-item">
							<checkbox-group class="checke_list" @change="addCheckboxChange">
								<label class="uni-list-cell uni-list-cell-pd checke_item"
									v-for="(ele, indexn) in addCheckboxList" :key="indexn">
									<view class="item_top"
										style="margin-bottom: 32rpx;border-bottom: 1px solid #eee;justify-content: space-between;display: flex;padding-bottom: 20rpx;">
										<view class="item_img">
											{{ele.name}}
										</view>
										<checkbox :value="JSON.stringify(ele.name)" :color="bgColor" :iconColor="bgColor"
											:checked="ele.checked" :disabled="ele.disabled" class="round-checkbox" />
									</view>
								</label>
							</checkbox-group>
							<view style="height: 50px;"></view>
						</view>
						<view v-else>
							<u-empty class="empty" mode="data"
								icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
						</view>
					</view>
				</tui-drawer>
			</view>

			<view class="middle" style="margin: 10px;">
				<!-- <button class="plain_bgColor" style="margin:10px ;height:32px; font-weight: bold;"
					:disabled="addCityButton" @click="openPopup(item.popupData)"
					:key="index3" :plain="true">+
					新增城市</button> -->
				<button class="plain_bgColor" :disabled="addCityButton"
					style="margin:10px ;height:32px; font-weight: bold;line-height: 62rpx;" @click="goInformation">+
					新增城市</button>
			</view>

			<!-- 内容为空 -->
			<u-empty class="empty" v-if="!tableData.length" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			<!-- 上拉加载更多 -->
			<uni-load-more v-else :status="loadMoreStatus"></uni-load-more>

			<!-- 提交审核 -->
			<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #FFF;">
				<!-- <button v-if="showTip == false && showTip2 == false"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
					class="bg_color" size="large" :disabled="disabled" @click="upReview">提交审核</button> -->
				<button v-if="showTip == false && showTip2 == false"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
					class="bg_color" size="large" @click="upReview">提交审核</button>
				<button v-else-if="showTip == true || showTip2 == true"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;" :color="bgColor"
					class="bg_color" size="large" @click="dropOperate">撤回</button>
			</view>
		</view>

		<view v-if="showTip == false && showTip2 == true">
			<view class="card">
				<view style="font-weight: bold;font-size: 18px;margin: 20px 0;">
					审核中
				</view>
				<view class="item_content">
					<view class="item_content_left">单据编号:</view>
					<view class="item_content_right">
						{{recordData.documentNumber}}
					</view>
				</view>
				<view class="item_content">
					<view class="item_content_left">发 起 人:</view>
					<view class="item_content_right">
						{{recordData.userName}}
					</view>
				</view>
				<view class="item_content">
					<view class="item_content_left">发起时间:</view>
					<view class="item_content_right">
						{{recordData.createTime}}
					</view>
				</view>
				<view class="item_content">
					<view class="item_content_left">审核时间:</view>
					<view class="item_content_right">
						{{recordData.checkTime}}
					</view>
				</view>
			</view>
			<!-- 审核详情展示 -->
			<view class="card">
				<view
					style="font-weight: bold;font-size: 18px;margin: 20px 0;border-bottom: 1px solid #f5f5f5;padding-bottom: 15px;">
					修改内容
				</view>
				<view class="content" style="margin-bottom: 15px;" v-for="(item,contentIndex) in decodedContent"
					:key="contentIndex">
					<span style="font-size: 16px;font-weight: 600;margin-top: 8px;display: block;">{{item.name}}</span>
					<view class="cityOperate" style="margin-top: 8px;">
						修改后: {{cityDetailValue[contentIndex]}}
					</view>
				</view>
			</view>
		</view>

		<!-- 审核中页面 -->


	</view>
</template>

<script>
	import tuiDrawer from '@/components/tui-drawer/index.vue';
	import {
		queryBusinessOperateCityApi,
		addBusinessOperateCityApi,
		dropBusinessOperateCityApi,
		queryBusinessOperateCityAuditRecordApi,
	} from '@/api/operateCity.js';
	import {
		setThemeColor
	} from '../../utils/setTheme';
	import checkbox from '../../uni_modules/uview-ui/libs/config/props/checkbox';
	let app = getApp();
	export default {
		components: {
			tuiDrawer
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataForm: {
					queryType: 0,
					current: 1,
					size: 10,
				},
				tableData: [],
				show: false,
				//横向两端排列形式
				checkboxList: [],
				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
				checkboxValue: {},
				innterIndex: '',
				//弹框
				show1: false,
				popupData: {
					overlay: true,
					mode: 'bottom',
					borderRadius: '',
					closeable: true,
					closeOnClickOverlay: true
				},
				list: [{
					popupData: {
						overlay: true,
						mode: 'right',
						closeOnClickOverlay: true
					},
					title: '右侧弹出',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/popup/modeRight.png'
				}],
				dataForm1: {
					queryType: 1,
					parentId: 0,
					display: 1,
				}, //右侧城市弹框查询
				cityDetail: [], //城市信息列表
				checkboxValue2: '',
				operateData: [],
				handleClickValue: [],
				//新加城市
				show2: false,
				//横向两端排列形式
				addCheckboxList: [],
				// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
				addCheckboxValue: [],
				innterIndex2: '',
				disabled: true, //提交审核按钮
				addCityButton: false, //增加城市按钮
				nullSonVOList: false, //未选择城市
				recordData: {
					checkTime: '', //审核时间
					createTime: '', //发起时间
					documentNumber: '', //单据编号
				}, //审核页面信息
				decodedContent: [], //审核页面--修改内容展示部分
				cityDetailValue: {}, //申请城市
				showTip: false, //查看审核页面判断
				showTip2: false, //返回按钮，判断
				// -------------
				totalPage: 1, //总页面数量
				loadMoreStatus: 'more', // 底部状态 noMore loading
				addCheckBox: [], //添加城市所选区域
				sonVOLists: [], //营业区域
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.initData();
			this.getOperateCity();
		},
		methods: {
			initData() {
				// 首次激活时被调用
				this.dataForm.current = 1;
				this.loadMoreStatus = 'more';

				this.getList();
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.dataForm.current++;
				this.getList(true);
			},

			async getList(isMerge) {
				delete this.dataForm.checkStatus;

				// let that = this;
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				// if (!isMerge) {
				// 	this.dataForm.current = 1;
				// 	this.loadMoreStatus = 'more';
				// }
				const res = await queryBusinessOperateCityApi(this.dataForm);
				// let data = res.data;
				// if(isMerge){
				// 	this.$util.SplitArray(data,that.tableData)
				// }else{
				// 	the.tableData = data;
				// }
				if (res.code == 200) {
					this.tableData = res.data;
					let sonVOLists = [];
					for (let i = 0; i < this.tableData.length; i++) {
						let name = this.tableData[i].sonVOList.map(obj => obj.name);
						this.checkboxValue[i] = name;
					}
					for (let ele of this.tableData) {
						for (let item of ele.sonVOList) {
							sonVOLists.push(item)
						}
					};
					this.sonVOLists = sonVOLists;
					uni.hideLoading();
				}

			},
			//打开下拉
			getId(item, index) {
				this.innterIndex = index;
				this.checkboxList = item.sonVOList;
				this.show = true;
			},
			//下层弹出事件复选框
			checkboxChange(n) {
				// this.checkboxValue[this.innterIndex] = n;
				let checkboxValue = n.detail.value.map((item) => JSON.parse(item));
				this.checkboxValue[this.innterIndex] = checkboxValue;
				this.refresh();
			},
			refresh() {
				this.someShow = false
				this.$nextTick(function() {
					this.someShow = true
				})
			},

			// 右侧弹框
			openPopup(popupData) {
				this.popupData = popupData;
				uni.$u.sleep().then(() => {
					this.show1 = !this.show1
				});
				queryBusinessOperateCityApi(this.dataForm1).then((res) => {
					this.cityDetail = res.data;
				});
			},
			/**
			 *返回的数据
			 */
			otherFun(checkboxValue) {
				// this.operateData = checkboxValue;
				// console.log('checkboxValue',checkboxValue)
				this.operateData.push(...checkboxValue);
			},
			// 详情信息
			goInformation() {
				// 页面传值 规格信息item，并可返回
				this.goPage(`/pages/businessOperateCity/addBusinessCity/addBusinessCity?data=` + JSON.stringify(this
					.operateData));
			},
			goPage(url) {
				uni.navigateTo({
					url,
				})
			},
			navigateBack() {
				uni.navigateBack()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false;
				this.show1 = false;
				this.show2 = false;
			},
			//添加城市 单选点击事件
			// handleChange(event) {
			// 	this.handleClickValue = event;
			// },
			//点击事业部
			checkboxChange2(n) {
				let radioValue = JSON.parse(n.detail.value);
				// this.addCheckboxValue[this.innterIndex] = n;
				this.addCheckboxValue[this.innterIndex] = radioValue.name;
				this.handleClickValue = radioValue;
			},
			//确认 添加城市
			addOperateCity() {
				for (let i = 0; i < this.operateData.length; i++) {
					if (this.operateData[i].name == this.handleClickValue.name) {
						uni.showToast({
							title: '已添加，请重新勾选',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						return;
					}
				}
				this.operateData.push(this.handleClickValue);
				if (this.operateData != '') {
					this.disabled = false;
				};
				this.show1 = false;
			},

			//点击打开添加 下拉城市
			getId2(item, index) {
				this.addCheckboxList = []; //清空
				queryBusinessOperateCityApi({
					parentId: item.useId,
					queryType: 1
				}).then((res) => {
					this.addCheckboxList = res.data;
					for (let ele of this.addCheckboxList) {
						this.$set(ele, 'checked', false);
					};


					// 对比两数组内容，给新数组对象添加标识
					const markedArray = this.addCheckboxList.map(item => {
						// 检查原数组中是否有相同useId的对象
						const found = this.sonVOLists.some(obj => {
							return obj.useId == item.useId;
						});
						// 如果找到相同useId的对象，则添加标识
						if (found) {
							return {
								...item,
								disabled: true
							};
						} else {
							return {
								...item,
								disabled: false
							};
						}
					});

					this.addCheckboxList = markedArray;

				}); //调取下拉查询城市数据
				this.innterIndex2 = index;
				this.show2 = true;
			},
			//添加--下层弹出事件复选框
			addCheckboxChange(n) {
				// this.addCheckboxValue[this.innterIndex2] = n;
				let addCheckBoxalue = [];
				addCheckBoxalue = n.detail.value.map((item) => JSON.parse(item));
				this.addCheckBox = addCheckBoxalue;
			},
			// 确认添加事件
			operateCityComuleDate() {
				if (!this.addCheckBox.length) {
					uni.showToast({
						title: '请选择城市售卖区域',
						icon: 'none',
						duration: 2000,
						mask: true
					});
					return
				};
				this.addCheckboxValue[this.innterIndex2] = this.addCheckBox;
				const clickedOptions = this.addCheckboxList.filter(ele => this.addCheckBox.includes(ele.name));
				const newArray = clickedOptions.map(obj => {
					const {
						createTime,
						sonVOList,
						...rest
					} = obj;
					//删除部分属性
					return rest
				});
				this.operateData[this.innterIndex2].sonVOList = newArray;
				//添加事业部对应的相应城市
				this.show2 = false;
				this.addCheckBox = [];//清空
			},
			//前端页面删除新加
			delateDate(ele) {
				this.operateData.splice(ele, 1) //使用splice 方法删除当前对象
				this.addCheckboxValue.splice(ele, 1) //相应地区删除
				if (this.operateData == '') {
					this.disabled = true;
				};
			},
			//提交审核
			upReview() {
				const newArray2 = this.operateData;
				newArray2.forEach(obj => {
					Object.keys(obj).forEach(key => {
						if (!obj[key]) {
							this.nullSonVOList = true;
						} else {
							this.nullSonVOList = false;
						}
					})
				});
				for (let item of newArray2) {
					if (!item.sonVOList) {
						uni.showToast({
							title: '请选择城市售卖区域',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						return
					}
				}
				if (this.nullSonVOList == false) {
					addBusinessOperateCityApi(newArray2).then((res) => {}) //提交审核
					this.addCityButton = true;
					this.operateData = {};
					this.getList();
					this.showTip = true;
					this.showTip2 = false;
					this.addCityButton = true;
				} else {
					uni.showToast({
						title: '请选择城市售卖区域',
						icon: 'none',
						duration: 2000,
						mask: true
					});
				};

			},
			//获取审核信息
			getOperateCity() {
				queryBusinessOperateCityAuditRecordApi().then((res) => {
					this.recordData = res.data;
					const content = res.data.content;
					this.decodedContent = JSON.parse(content);
					//审核页面显示隐藏
					if (content == null) {
						//无审核数据，只展示列表
						this.showTip = false;
						this.showTip2 = false;
					} else {
						this.showTip = true;
						this.showTip2 = false;
						for (let i = 0; i < this.decodedContent.length; i++) {
							let name = this.decodedContent[i].sonVOList.map(obj => obj.name).join(',');
							this.cityDetailValue[i] = name;
						};
					}
				})
			},
			//查看审核信息
			operateInform() {
				this.dataForm.checkStatus = 1;
				this.getOperateCity();
				setTimeout(() => {
					this.showTip = false; // 查看审核信息隐藏
					this.showTip2 = true; //返回展示
				}, 1000);

			},
			//返回已审核成功页面
			goBack() {
				this.showTip = true;
				this.showTip2 = false;
			},
			//商家撤回审核申请
			dropOperate() {
				dropBusinessOperateCityApi().then((res) => {});
				this.showTip = false;
				this.showTip2 = false;
				this.addCityButton = false;
				// this.dataForm.checkStatus = 2;
				this.operateData = []; //撤回后初始化
				this.addCheckboxValue = []; //撤回后初始化
			},
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	u-popup {
		width: 100% !important;
	}

	.card {
		margin: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 10px;
	}

	.header {
		font-size: 17px;
		font-weight: bold;
		-webkit-text-stroke-width: 700;
	}

	.header-text {
		margin-top: 10px;
	}

	.middle {
		padding: 15px;
		font-weight: 500;
	}

	.u-demo-block {
		height: 50vh;
		padding: 20px;
	}

	.u-demo-block__title {
		font-size: 16px;
		font-weight: bold;
		display: block;
		text-align: center;
		margin-bottom: 20px;
	}

	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.item_content_left {
			flex: 1;
		}

		.item_content_right {
			flex: 2;
		}
	}

	.ensure {
		width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

		.title {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 0 0 30rpx 0;
			padding-bottom: 30rpx;
			position: relative;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				left: 30rpx;
				top: 0;
				font-size: 30rpx;
			}

			.iconfontRight {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 30rpx;
				@include main_color(theme);
			}
		}

		.title_guan {
			font-size: 30rpx;
			font-weight: bold;
			color: #282828;
			text-align: center;
			margin: 0 0 30rpx 0;
			padding-bottom: 30rpx;
			position: relative;
			border-bottom: 1px solid #f0edf0;

			.iconfont {
				position: absolute;
				right: 30rpx;
				top: 0;
				font-size: 30rpx;
			}

		}

	}

	.footer {
		position: sticky;
		left: 0px;
		bottom: 0px;
		width: 100%;
		padding: 10px;
		background-color: #FFF;
		margin-top: 75vh;
	}

	.openBottom {
		position: absolute;
		bottom: 0px;
		width: 100%;
		padding: 10px;
		background-color: #FFF;
	}

	/deep/ .tui-drawer-container_bottom {
		border-radius: 16rpx 16rpx 0 0;
	}
</style>